<style lang="less">
  .dashboard_zoom {
    height: 100%;
  }

  .dashboard {
    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px #00bbec inset;
    }
    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px #00bbec inset;
    }
    background: url("../../assets/dashboard/bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .el-radio-button__inner, .el-button {
      color: #00bbec;
      background-color: #101535;
    }
    .fa-arrow-down:before {
      font-size: 18px;
    }
    .fa-arrow-down {
      margin-left: 20px;
      font-size: 12px;
      color: green;
    }
    .fa-arrow-up:before {
      font-size: 18px;
    }
    .fa-arrow-up {
      margin-left: 20px;
      font-size: 12px;
      color: #ff6600;
    }
    .fa-expand {
      font-size: 25px;
      color: #00bbec;
      position: absolute;
      right: 34px;
      z-index: 100;
      cursor: pointer;
    }
    .fa-compress {
      font-size: 25px;
      color: #00bbec;
      position: absolute;
      right: 0px;
      z-index: 100;
      cursor: pointer;
    }
    div {
      z-index: 99;
    }
    .label_txt {
      font-size: 18px;
      color: #00bbec;
    }
    .label_num {
      font-size: 30px;
      color: white;
      div {
        display: inline-block;
        width: 180px;
        text-align: right;
      }
    }
    .label_num_center {
      text-align: center;
      font-size: 18px;
    }
    .more_txt {
      font-size: 16px;
      float: right;
      color: green;
    }
    .label_title {
      padding: 16px 14px 0 16px;
    }
    .dashboard_header {
      line-height: 100px;
      text-align: center;
      height: 100px;
      font-size: 30px;
      color: white;
      span {
        color: #00bbec;
        font-size: 50px;
        padding: 5px;
        margin: 0 10px 0 10px;
        border: 1px #00bbec solid;
        border-radius: 10px;
        box-shadow: 0 0 10px #00bbec;
      }
    }
    > .center {
      flex: 1;
      display: flex;
      > div:first-child {
        height: 100%;
        width: 400px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        > div {
          padding: 18px 0 10px 54px;
          margin-bottom: 10px
        }
        > div:first-child {
          background: url("../../assets/dashboard/1.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:nth-child(2) {
          background: url("../../assets/dashboard/2.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:nth-child(3) {
          background: url("../../assets/dashboard/3.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:last-child {
          flex: 1;
          padding: 0px;
          display: flex;
          min-height: 300px;
          flex-direction: column;
          background: url("../../assets/dashboard/4.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 0px;
          .el-radio-group {
            margin: 20px 16px 0 16px;
          }
          #a1 {
            flex: 1;
            padding: 10px;
          }
        }
      }

      > .dashboard_main {
        background: url("../../assets/dashboard/5.png") no-repeat;
        background-size: 100% 100%;
        flex: 1;
        display: flex;
        #map {
          flex: 1;
        }
      }
      > div:last-child {
        height: 100%;
        width: 400px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        > div {
          min-height: 250px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          padding: 10px;
          div:last-child {
            flex: 1;
          }
          background: url("../../assets/dashboard/4.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    > div:last-child {
      height: 150px;
      margin-top: 10px;
      background: url("../../assets/dashboard/8.png") no-repeat;
      background-size: 100% 100%;
      .el-col-label {
        padding: 10px 0;
      }
      .el-col-border {
        border-left: 1px white solid;
        border-right: 1px white solid;
      }
      > .el-col {
        .el-col-title {
          height: 40px;
          line-height: 40px;
          padding-left: 50px;
          .el-button {
            float: right;
          }
        }
        .el-col-title_0 {
          background: url("../../assets/dashboard/line.png") no-repeat;
          background-size: 40px;
        }
        .el-col-title_1 {
          background: url("../../assets/dashboard/TheDriver.png") no-repeat;
          background-size: 40px;
        }
        .el-col-title_2 {
          background: url("../../assets/dashboard/partner.png") no-repeat;
          background-size: 40px;
        }
        height: 100%;
        padding: 20px 50px 15px 50px;
      }
      > .el-col:nth-child(2) {
        .el-col-title {
          margin: 0 50px 0 50px;
        }
        padding: 20px 0px 15px 0px;
      }
      .el-col-label_1 {
        .el-col {
          padding-right: 38px;
        }
      }
    }
  }
</style>

<template>
  <div class="dashboard" :class="$store.state.fullScreen?'dashboard_zoom':''">
    <i class="fa" :class="$store.state.fullScreen?'fa-compress':'fa-expand'" @click="fullScreen"></i>
    <div class="dashboard_header">全国实时发货货量(天)<span>{{wholeShipment.realTimeShipment}}</span>票</div>
    <div class="center">
      <div>
        <div>
          <div class="label_txt">累计发货客户数</div>
          <div class="label_num">{{wholeShipment.cumulativeCustomer}} <span class="label_txt">人</span></div>
        </div>

        <div>
          <div class="label_txt">累计发货总量</div>
          <div class="label_num">{{wholeShipment.cumulativeShipments.totalAmount.toFixed(2)}} <span
            class="label_txt">件</span></div>
          <div class="label_txt">累计重量:
            <span class="label_num">
                            <div>{{wholeShipment.cumulativeShipments.totalWeight.toFixed(2)}}</div>
                        </span>吨
          </div>
          <div class="label_txt">累计体积:
            <span class="label_num"><div>{{wholeShipment.cumulativeShipments.totalVolume.toFixed(2)}}</div></span>方
          </div>
        </div>

        <div>
          <div class="label_txt">累计优惠总额</div>
          <div class="label_num">{{wholeShipment.cumulativeDiscount.toFixed(2)}} <span class="label_txt">元</span></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">发货量统计图</span><span class="more_txt">更多></span></div>
          <el-radio-group v-model="shipmentStatisticsType">
            <el-radio-button label="DAY">每日</el-radio-button>
            <el-radio-button label="WEEK">每周</el-radio-button>
            <el-radio-button label="MONTH">每月</el-radio-button>
          </el-radio-group>
          <div id="a1"></div>
        </div>
      </div>
      <div class="dashboard_main">
        <div id="map"></div>
      </div>
      <div>
        <div>
          <div class="label_title"><span class="label_txt">全国发货量TOP8(票)</span><span class="more_txt">更多></span></div>
          <div id="qgfhl"></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">事业合伙人周收益TOP5(元)</span><span class="more_txt">更多></span></div>
          <div id="syhfr"></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">网点周收益TOP5(元)</span><span class="more_txt">更多></span></div>
          <div id="dot"></div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_0">
          全国专线数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label">
          <el-col :span="12" class="label_num label_num_center">
            专线数(条)
            <i class="fa"
               :class="lineStatistics.linePercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{lineStatistics.linePercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            发车量(车)
            <i class="fa"
               :class="lineStatistics.vehiclePercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{lineStatistics.vehiclePercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{lineStatistics.lineNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{lineStatistics.vehicleNum}}
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_1">
          全国短驳司机数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label el-col-border">
          <el-col :span="12" class="label_num label_num_center">
            司机数(人)<i class="fa"
                     :class="shortTaskStatistics.driverPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{shortTaskStatistics.driverPercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            接单量(单)<i class="fa"
                     :class="shortTaskStatistics.taskPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{shortTaskStatistics.taskPercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{shortTaskStatistics.driverNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{shortTaskStatistics.taskNum}}
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_2">
          全国事业合伙人数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label">
          <el-col :span="12" class="label_num label_num_center">
            合伙人(人)<i class="fa"
                     :class="partnerStatistics.partnerPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{partnerStatistics.partnerPercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            收益额(元)<i class="fa"
                     :class="partnerStatistics.partnerAmountPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{partnerStatistics.partnerAmountPercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{partnerStatistics.partnerNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{partnerStatistics.partnerAmountNum.toFixed(2)}}
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import geoCoordMap from '../../lib/echarts/area';
  import {
    wholeShipment,
    shipmentStatistics,
    lineStatistics,
    cityDeliveringAmount,
    cityTop,
    partnerTop,
    dotTop,
    partnerStatistics,
    shortTaskStatistics
  } from '../../api/order/dashboard';

  export default{
    data () {
      return {
        wholeShipment: {
          'realTimeShipment': 0,
          'cumulativeShipments': {
            'totalAmount': 0,
            'totalVolume': 0.0,
            'totalWeight': 0.0
          },
          'cumulativeCustomer': 0,
          'cumulativeDiscount': 0.0
        },
        shipmentStatistics: {
          x: [],
          y: []
        },
        cityTop: {
          x: [],
          y: []
        },
        partnerTop: {
          x: [],
          y: []
        },
        dotTop: {
          x: [],
          y: []
        },
        shipmentStatisticsType: 'DAY',
        chart: {
          shipmentStatisticsChart: null,
          cityTopChart: null,
          partnerTopChart: null,
          dotTopChart: null
        },
        lineStatistics: {
          'linePercentage': 0,
          'lineNum': 0,
          'vehicleNum': 0,
          'vehiclePercentage': 0
        },
        shortTaskStatistics: {
          'driverNum': 0,
          'taskPercentage': 0,
          'driverPercentage': 0,
          'taskNum': 0
        },
        partnerStatistics: {
          'partnerPercentage': 0,
          'partnerAmountPercentage': 0,
          'partnerAmountNum': 0,
          'partnerNum': 0
        },
        cityDeliveringAmount: [],
        shipments_city: null
      };
    },
    methods: {
      wholeShipmentLoad () {
        wholeShipment().then(res => {
          if (res.data.successFlg) {
            this.wholeShipment = res.data.obj;
          }
        });
      },
      shipmentStatisticsLoad (type) {
        shipmentStatistics(type).then(res => {
          let x = [];
          let y = [];
          if (res.data.successFlg) {
            res.data.detailModelList.forEach(item => {
              x.push(item.x);
              y.push({value: item.totalAmount, totalVolume: item.totalVolume, totalWeight: item.totalWeight});
            });
            this.shipmentStatistics.x = x;
            this.shipmentStatistics.y = y;
          }
        });
      },
      lineStatisticsLoad () {
        lineStatistics().then(res => {
          if (res.data.successFlg) {
            this.lineStatistics = res.data.obj;
          }
        });
      },
      shortTaskStatisticsLoad () {
        shortTaskStatistics().then(res => {
          if (res.data.successFlg) {
            this.shortTaskStatistics = res.data.obj;
          }
        });
      },
      cityTopLoad () {
        cityTop(8).then(res => {
          if (res.data.successFlg) {
            let x = [];
            let y = [];
            if (res.data.detailModelList.length > 0) {
              this.shipments_city = res.data.detailModelList[0].shipments_city;
              this.cityDeliveringAmountLoad(res.data.detailModelList[0].shipments_city_id);
            }
            res.data.detailModelList.forEach(item => {
              x.push(item.shipments_city);
              y.push({value: item.num, shipments_city_id: item.shipments_city_id, shipments_city: item.shipments_city});
            });
            this.cityTop.x = x;
            this.cityTop.y = y;
          }
        });
      },
      partnerTopLoad () {
        partnerTop(5).then(res => {
          if (res.data.successFlg) {
            let x = [];
            let y = [];
            if (res.data.successFlg) {
              res.data.detailModelList.forEach(item => {
                x.push(item.real_name);
                y.push(item.num.toFixed(2));
              });
              this.partnerTop.x = x;
              this.partnerTop.y = y;
            }
          }
        });
      },
      dotTopLoad () {
        dotTop(5).then(res => {
          if (res.data.successFlg) {
            let x = [];
            let y = [];
            if (res.data.successFlg) {
              res.data.detailModelList.forEach(item => {
                x.push(item.name);
                y.push(item.num.toFixed(2));
              });
              this.dotTop.x = x;
              this.dotTop.y = y;
            }
            console.log(this.dotTop);
          }
        });
      },
      cityDeliveringAmountLoad (cityId) {
        cityDeliveringAmount(cityId).then(res => {
          if (res.data.successFlg) {
            this.cityDeliveringAmount = res.data.detailModelList;
          }
        });
      },
      partnerStatisticsLoad () {
        partnerStatistics().then(res => {
          if (res.data.successFlg) {
            this.partnerStatistics = res.data.obj;
          }
        });
      },
      fullScreen () {
        this.$store.commit('fullScreen');
        this.$router.push(this.$store.state.fullScreen ? '/full_screen' : '/dashboard/dashboard');
      },
      load () {
        let self = this;
        this.chart.shipmentStatisticsChart = echarts.init(document.getElementById('a1'), {width: 'auto'});

        this.chart.cityTopChart = echarts.init(document.getElementById('qgfhl'), {
          width: 'auto'
        });
        this.chart.cityTopChart.on('click', function (obj) {
          self.shipments_city = obj.data.shipments_city;
          self.cityDeliveringAmountLoad(obj.data.shipments_city_id);
        });
        this.chart.partnerTopChart = echarts.init(document.getElementById('syhfr'), {
          width: 'auto'
        });
        this.chart.dotTopChart = echarts.init(document.getElementById('dot'), {
          width: 'auto'
        });
        this.chart.cityDeliveringAmountChart = echarts.init(document.getElementById('map'), {
          width: 'auto'
        });
      },
      init () {
        this.wholeShipmentLoad();
        this.shipmentStatisticsLoad(this.shipmentStatisticsType);
        this.lineStatisticsLoad();
        this.shortTaskStatisticsLoad();
        this.cityTopLoad();
        this.partnerTopLoad();
        this.dotTopLoad();
        this.partnerStatisticsLoad();
      }
    },
    watch: {
      shipmentStatisticsType (type) {
        this.shipmentStatisticsLoad(type);
      },
      'shipmentStatistics.x': {
        handler (val) {
          this.chart.shipmentStatisticsChart.setOption({
            grid: {
              top: 20,
              left: 30,
              right: 30,
              bottom: 20,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              formatter (item) {
                let o = item[0];
                return o.data.value + ' 件<br/>' + o.data.totalWeight + ' 吨<br/>' + o.data.totalVolume + ' 方';
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: val.length ? val : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
              axisLine: {
                lineStyle: {
                  color: 'yellow'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: 'yellow'
                }
              }
            },
            series: [
              {
                name: '发货量',
                type: 'line',
                data: this.shipmentStatistics.y
              }
            ]
          });
        },
        deep: true
      },
      'cityTop.x': {
        handler (val) {
          this.chart.cityTopChart.setOption({
            color: ['#50bbde'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top: 10,
              left: 10,
              right: 10,
              bottom: 10,
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              type: 'category',
              inverse: true,
              data: val,
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'white'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter (val, index) {
                  return (index + 1) + '. ' + val;
                }
              }
            },
            series: [
              {
                name: '票数',
                type: 'bar',
                barMaxWidth: 22,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'insideRight',
                    textStyle: {
                      color: 'white'
                    }
                  }
                },
                data: this.cityTop.y
              }
            ]
          });
        },
        deep: true
      },
      'partnerTop.x': {
        handler (val) {
          this.chart.partnerTopChart.setOption({
            color: ['#8c91dc'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top: 10,
              left: 10,
              right: 10,
              bottom: 10,
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              type: 'category',
              inverse: true,
              data: val,
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'white'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter (val, index) {
                  return (index + 1) + '. ' + val;
                }
              }
            },
            series: [
              {
                name: '金额',
                type: 'bar',
                barMaxWidth: 22,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'insideRight',
                    textStyle: {
                      color: 'white'
                    }
                  }
                },
                data: this.partnerTop.y
              }
            ]
          });
        },
        deep: true
      },
      'dotTop.x': {
        handler (val) {
          this.chart.dotTopChart.setOption({
            color: ['#8c91dc'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top: 10,
              left: 10,
              right: 10,
              bottom: 10,
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              type: 'category',
              inverse: true,
              data: val,
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'white'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter (val, index) {
                  return (index + 1) + '. ' + val;
                }
              }
            },
            series: [
              {
                name: '金额',
                type: 'bar',
                barMaxWidth: 22,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'insideRight',
                    textStyle: {
                      color: 'white'
                    }
                  }
                },
                data: this.dotTop.y
              }
            ]
          });
        },
        deep: true
      },
      cityDeliveringAmount (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = geoCoordMap[this.shipments_city];
          let toCoord = geoCoordMap[dataItem.send_city];
          if (fromCoord && toCoord) {
            res.push({
              fromName: this.shipments_city,
              toName: dataItem.send_city,
              coords: [fromCoord, toCoord]
            });
          }
        }
        this.chart.cityDeliveringAmountChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            zoom: 1.2,
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#101535',
                borderColor: '#00bbec'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },
          series: [{
            name: 'Top10',
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 0,
                curveness: 0.2
              }
            },
            data: res
          }, {
            name: 'Top10',
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbolSize: 15
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: res
          }, {
            name: 'Top10',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: 'orange'
              }
            },
            data: data.map(function (dataItem) {
              let coordMap = geoCoordMap[dataItem.send_city];
              return {
                name: dataItem.send_city,
                value: coordMap.concat([dataItem.num])
              };
            })
          }]
        });
      }
    },
    mounted () {
      this.load();
      this.init();
      var self = this;
      window.onresize = function () {
        self.chart.shipmentStatisticsChart.resize();
        self.chart.cityDeliveringAmountChart.resize();
        self.chart.cityTopChart.resize();
        self.chart.partnerTopChart.resize();
      };
      window.dashboartInterval = window.setInterval(function () {
        self.init();
      }, 600000);
    }
  };
</script>
